<template>
  <a-modal v-model:visible="visible" width="60%" title="传感器设置" :footer="null">
    <div class="py-4 px-6">
      <this-form @finished="finished" ref="formRef" />
    </div>
    <div class="flex justify-end px-6 pb-4">
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" class="ml-4" @click="save">批量设置</a-button>
    </div>
  </a-modal>
</template>
    <script lang="ts">
import { message } from 'ant-design-vue';
import { defineComponent, ref, nextTick } from 'vue';
import thisForm from './form.vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { thisForm },
  setup(props, { emit }) {
    const visible = ref<boolean>(false);
    const formRef = ref<any>();
    let hid = 0;

    const open = (rows) => {
      if (rows.length === 0) return;
      visible.value = true;
      hid = rows[0].gatherDeviceId;

      nextTick(() => {
        formRef.value.init(rows);
      });
    };

    const finished = (event) => {
      visible.value = false;
      // emit(id.value ? 'edited' : 'added', event);
    };

    function cancel() {
      formRef.value.cancel();
      visible.value = false;
    }

    function save() {
      let params = Object.keys(formRef.value.editableData).map((key) => {
        let item = formRef.value.editableData[key];
        item.id = 1 * item.key;
        return item;
      });

      defHttp.post({ url: '/Sensor/batch-set-thershold', params }).then((res) => {
        message.success('操作成功');
        emit('saved', hid);
      });
      // formRef.value.save();
      visible.value = false;
    }

    return {
      visible,
      finished,
      open,
      formRef,
      cancel,
      save,
    };
  },
});
</script>
    
    